import PropTypes from 'prop-types'
import {useState} from 'react'
import "./style.scss"

function Button(props) {
    let {type,children,onClick} = props
    return (
        <div className="ml-button">
            <span className={type} onClick={onClick}>{ children }</span>
        </div>
    )
}

Button.propTypes = {
    // title:PropTypes.string,//期望传过来的title是字符串类型
    // title: PropTypes.node,
    children: PropTypes.node,
    // closable:PropTypes.bool,
    type: PropTypes.oneOf(['primary', 'danger', 'default', 'info']),
    onCancel: PropTypes.func,
    onclick: PropTypes.func,
    
}

Button.defaultProps = {
    // title: '默认小标题',
    // closable: true,
    children: '按钮',
    type: 'default',
    onCancel: () => { },
    onclick: () => { },
    
}

function Modal(props) {
    let { title, closable, children, type,visiable,onCancel,onOk } = props
    let reanderFooter = () => {
        let btns = []
        switch (type) {
            case 'confirm':
                btns = [
                    <Button type='primary' key='1' onClick={onOk}>确定</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case 'danger':
                btns = [
                    <Button type='danger' key='1' onClick={onOk}>删除</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case 'info':
                btns = [
                    <Button type='info' key='1' onClick={onCancel}>确定</Button>
                ]
                break;
                
        }
        return btns;
    }
    let handerLayer = (e) => {
        if (e.target.dataset.self) {
            onCancel()
        }
    }
    return (
        <div
            className="ml-layer"
            style={{ display: visiable ? 'block' : 'none' }}
            onClick={handerLayer}
        >
            <div className="ml-modal">
                <header>
                    <div>
                        <div>{title}</div>
                        <div onClick={onCancel}>{ closable && 'X'}</div>
                    </div>
                </header>
                <main>
                    {
                        children
                    }
                </main>
                <footer>
                    {/* <Button type='primary'>确定</Button>
                    <Button type='danger'>取消</Button> */}
                    {
                        reanderFooter()
                    }
                </footer>
            </div>
        </div>
    )
}
Modal.propTypes = {
    // title:PropTypes.string,//期望传过来的title是字符串类型
    title: PropTypes.node,
    children: PropTypes.node,
    closable: PropTypes.bool,
    type: PropTypes.oneOf(['danger', 'info', 'confirm']),
    visiable: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk:PropTypes.func
}

Modal.defaultProps = {
    title: '默认小标题',
    closable: true,
    children: <div>主体内容的默认值</div>,
    type: 'info',
    visiable: false,
    onCancel: () => { },
    onOk: () => { },
    
    
}

function PageA() {
    let [visiable, setVisiable] = useState(false)
    let submit = () => {
        setTimeout(() => {
            console.log('submit...');
            console.log('发送ajax请求...');
            setVisiable(false)
        },200)
    }
    // let submit = () => {
    //     console.log('submit');
    // }
    return (
        <div>
             <button onClick={()=> setVisiable(true)}>open modal</button>
            <Modal
                title={<span style={{ color: 'red' }}>删除用户</span>}
                closable
                type='danger'
                visiable={visiable}
                onCancel={() => setVisiable(false)}
                onOk={submit}
            >
                <div>
                    <input type="text" />
                    <div>你确定要添加此用户吗？</div>
                </div>
            </Modal>

        </div>
    )
}

export default PageA